<script setup lang="ts">
import { ref } from 'vue'
import { NFlex, NButton, NCheckbox, NGrid, NGridItem, NInput } from 'naive-ui';

// 定义朋友对象的接口
interface Friend {
  工号: string;
  姓名: string;
  部门: string;
  职务: string;
}

const props = defineProps({
  friendsList: {
    type: Array as () => Friend[], // 使用类型断言来指定数组元素的类型
    default: () => [] // 默认值是一个空数组
  },
  selectCount: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['submit', 'cancel', 'update:selectCount'])

const selectedFriends = ref<any>([]);
const clickSelectFriend = (isSelect: boolean, item: any) => {
  const index = selectedFriends.value.findIndex((friend: any) => friend === item);

  if (isSelect) {
    // 如果选中且当前数组中不存在该项，则添加  
    if (index === -1) {
      selectedFriends.value.push(item);
    }
  } else {
    // 如果取消选择且当前数组中存在该项，则删除  
    if (index !== -1) {
      selectedFriends.value.splice(index, 1);
    }
  }
  emit('update:selectCount', selectedFriends.value.length);
}
const filterValue = ref('');
const filterFunction = (item: any) => {
  return item.姓名.includes(filterValue.value) || item.部门.includes(filterValue.value) || item.职务.includes(filterValue.value) || item.工号.includes(filterValue.value);
}
const checkboxValue = (item: any) => {
  return selectedFriends.value.some((friend: any) => friend.工号 === item.工号);

}
</script>
<template>
  <n-flex>
    <!-- 左侧好友列表 -->
    <div class="leftArea" style="width: 200px; height: 300px;">
      <n-input placeholder="筛选" v-model:value="filterValue" clearable />
      <div class="listContent" style="height: 260px;">
        <template v-for=" (item, index) in props.friendsList.filter(filterFunction)" :key="index">
          <div class="ulbox">
            <n-checkbox style="margin-right: 10px;" @update-checked="clickSelectFriend($event, item)"
              :checked="checkboxValue(item)" />
            <div class="imgbox">{{ item.姓名.slice(-2) }}</div>
            <span style="margin-left: 5px;font-size: 12px;">
              <span style="display: block;font-weight: 500;font-size: 14px;">{{ item.姓名 }}</span>
              <span style="display: block;">{{ item.部门 }}</span>
              <!-- <span style="display: block;">{{ item.职务 }}</span> -->
            </span>
          </div>
        </template>
      </div>
    </div>
    <!-- 右侧已选好友 -->
    <div style="display: flex; flex-direction: column; width: 330px;height: 300px">
      <n-grid :cols="4">
        <n-grid-item v-for="(item, index) in selectedFriends" :key="index" style="text-align: center;">
          <div class="imgbox" style="display: inline-block;">{{ item.姓名.slice(-2) }}</div>
          <div>{{ item.姓名 }}</div>
        </n-grid-item>
      </n-grid>
      <div style="text-align: center; margin-top: auto; padding: 10px;">
        <slot name="right-area-bottom-extra"></slot>
      </div>
    </div>
  </n-flex>
  <n-flex justify="end">
    <n-button @click="emit('cancel')">取消</n-button>
    <n-button type="primary" :disabled="selectedFriends.length === 0"
      @click="emit('submit', selectedFriends)">创建</n-button>
  </n-flex>

</template>

<style scoped>
.ulbox {
  height: 60px;
  padding-left: 10px;
  display: flex;
  justify-items: center;
  align-items: center;
  /* border: 1px solid #eee; */
  position: relative;
  /* border-radius: 10px; */
}

.imgbox {
  /* background-color: #3f80fc; */
  font-size: 15px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  color: #000;
  text-align: center;
  background: url(../assets/image/head.png) no-repeat;
  background-size: cover;
}

.leftArea {
  background-color: #f6f6f6;
}

.listContent {
  overflow-y: auto;
}

/* 滚动条轨道 */
.listContent::-webkit-scrollbar-track {
  background: #f6f6f6;
  /* 轨道颜色 */
}

.listContent::-webkit-scrollbar-thumb {
  background: #eee;
  /* 滑块颜色 */
  border-radius: 4px;
  /* 滑块圆角 */
}

/* 整个滚动条 */
.listContent::-webkit-scrollbar {
  width: 8px;
}
</style>